<template>
  <div class="card" :style="{ background: cardInfo.background }">
    <div class="card-headers" @click="action">
      <img :src="cardInfo.icon" alt="" />
      <span>{{ cardInfo.title }}</span>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import config from "../../views/test/config";
import { getSSCApplyInfo, getSSCSign } from "@/apis/test";
const bgs = [
  "linear-gradient(177deg, #6da1ff -12%, #062dff 83%)",
  "linear-gradient(168deg, #f8897d -10%, #ec6265 61%)",
  "linear-gradient(172deg, #6ddad7 -10%, #3daeb2 58%)",
  "linear-gradient(177deg, #6da1ff -12%, #062dff 83%)",
  "linear-gradient(168deg, #f8897d -10%, #ec6265 61%)",
  "linear-gradient(172deg, #6ddad7 -10%, #3daeb2 58%)",
  "linear-gradient(177deg, #6da1ff -12%, #062dff 83%)",
  "linear-gradient(168deg, #f8897d -10%, #ec6265 61%)",
  "linear-gradient(172deg, #6ddad7 -10%, #3daeb2 58%)"
];
export default {
  name: "Card",
  props: {
    // icon: {
    //   type: Object,
    //   default: () => {
    //     return require("@/assets/img/logo.png");
    //   }
    // },
    icon: String,
    name: String,
    index: Number,
    cardInfo: Object
  },
  data() {
    return {};
  },
  methods: {
    randomBg() {
      // return bgs[Math.floor(Math.random() * bgs.length)];
      return bgs[this.index];
    },
    action() {
      if (this.cardInfo.available === 1) {
        if (this.cardInfo.state === "01") {
          location.href = this.cardInfo.pageUrl;
        } else {
          if (this.cardInfo.title === "电子社保卡") {
            this.showFace();
          } else {
            location.href = this.cardInfo.bindUrl;
          }
        }
      } else {
        Dialog.alert({
          title: "提示",
          message: "此卡不可用！"
        });
      }
    },
    showFace() {
      getSSCApplyInfo().then(res => {
        if (res.data && res.data.signFlag === "1") {
          this.show(res.data);
        }
      });
    },
    show(data) {
      let url = location.href.split("?");
      let params = {
        channelNo: data.channelNo,
        signNo: data.signNo,
        returnUrl: url[0],
        isWeb: "1"
      };
      getSSCSign(params).then(res => {
        location.href = `${config.sscServer}/indep/cardInfo?${res.data}`; // 卡面
      });
    }
  }
};
</script>

<style scoped lang="less">
.card {
  width: 345px;
  /*height: 100px;*/
  height: 70px;
  //background: linear-gradient(177deg, #6da1ff -12%, #062dff 83%);
  //background: linear-gradient(168deg, #f8897d -10%, #ec6265 61%);
  //background: linear-gradient(172deg, #6ddad7 -10%, #3daeb2 58%);
  border-radius: 10px;
  margin: 0 auto;

  .card-headers {
    display: flex;
    align-items: center;
    height: 54px;
    padding: 8px 20px 0 20px;

    img {
      width: 24px;
      height: 24px;
    }

    span {
      margin-left: 15px;
      height: 22px;
      line-height: 22px;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
</style>
